<template>
    <div class="ContractInquiryDetial contract-detial-page contract-inquiry-detial contract-detail-page" >
        <Card>
            <div class=" top-btn" style="padding-bottom: 16px;">
                <Button type="primary" @click="exportData(1)" style="margin-right: 16px;">导出</Button>
                <Button type="primary" @click="printTable">打印</Button>
            </div>
            <div class="contract-detail-collapse">
                <div id="printTable">
                    <Collapse v-model="openPanel">
                        <Panel name="1" >
                            <span>应收月供</span>
                            <span class="common_title_more">
                                <span>内部合同号:</span>
                                <span>{{contractNo}}</span>
                            </span>
                            <div class="content" slot="content">
                                <div class="common_content">
                                    <Table width="100%" :columns="repaymentPlanTableHead" :data="repaymentPlan"
                                           :loading="loading" border show-summary ref="table">
                                        <template slot-scope="{ row, index }" slot="payment_month">
                                            <span>{{numberFormat(row.payment_month,2)}}</span>
                                        </template>
                                        <template slot-scope="{ row, index }" slot="settlement_amount">
                                            <span>{{numberFormat(row.settlement_amount,2)}}</span>
                                        </template>
                                        <template slot-scope="{ row, index }" slot="totalUnpaidPrinciple">
                                            <span>{{numberFormat(row.totalUnpaidPrinciple,2)}}</span>
                                        </template>
                                        <template slot-scope="{ row, index }" slot="totalUnpaidInterest">
                                            <span>{{numberFormat(row.totalUnpaidInterest,2)}}</span>
                                        </template>
                                        <template slot-scope="{ row, index }" slot="unpaidRent">
                                            <span>{{numberFormat(row.unpaidRent,2)}}</span>
                                        </template>
                                    </Table>
                                    <div id="noPrint_1" style="padding-top: 8px;">
                                        <Checkbox class="no-print" v-model="single" @on-change="changeBox">查询所有应收月供</Checkbox>
                                    </div>
                                </div>
                            </div>
                        </Panel>
                        <Panel name="2" >
                            <span>应收罚息</span>
                            <div class="content" slot="content">
                                <div class="common_content">
                                    <Table width="100%" :columns="penaltyInterestTableHead" :data="penaltyInterest"
                                           :loading="loading" border show-summary ref="table2">
                                        <template slot-scope="{ row }" slot="subtotalAmt">
                                            <span>{{changeSubtotalAmt(row)}}</span>
                                        </template>
                                        <template slot-scope="{ row }" slot="penaltyDate">
                                            <span>{{changePenaltyDate(row)}}</span>
                                        </template>
                                        <template slot-scope="{ row }" slot="penaltyDateEnd">
                                            <span>{{changePenaltyDateEnd(row)}}</span>
                                        </template>
                                        <template slot-scope="{ row }" slot="receivedAmt">
                                            <span>{{numberFormat(row.receivedAmt,2)}}</span>
                                        </template>
                                        <template slot-scope="{ row }" slot="totalPenalty">
                                            <span>{{numberFormat(row.totalPenalty,2)}}</span>
                                        </template>
                                        <template slot-scope="{ row }" slot="exemptedAmt">
                                            <span>{{numberFormat(row.exemptedAmt,2)}}</span>
                                        </template>
                                    </Table>
                                </div>
                            </div>
                        </Panel>
                        <Panel name="3" >
                            <span>应收费用</span>
                            <div class="content" slot="content">
                                <div class="common_content">
                                    <Table width="100%" :columns="expenseTableHead" :data="expense"
                                           :loading="loading" border show-summary ref="table3">
                                        <!-- 费用类型 -->
                                        <template slot-scope="{ row }" slot="costType">
                                            <span>{{getTitle('feeType',row.costType)}}</span>
                                        </template>
                                        <template slot-scope="{ row }" slot="costAmt">
                                            <span>{{numberFormat(row.costAmt,2)}}</span>
                                        </template>
                                        <template slot-scope="{ row }" slot="exemptedAmt">
                                            <span>{{numberFormat(row.exemptedAmt,2)}}</span>
                                        </template>
                                        <template slot-scope="{ row }" slot="receivedAmt">
                                            <span>{{numberFormat(row.receivedAmt,2)}}</span>
                                        </template>
                                        <template slot-scope="{ row }" slot="expireAmt">
                                            <span>{{numberFormat(row.expireAmt,2)}}</span>
                                        </template>
                                    </Table>
                                </div>
                            </div>
                        </Panel>
                    </Collapse>
                    <h2 class="total">
                        <span class="heavy">总应收：</span>
                        <span>{{total}}</span>
                    </h2>
                </div>
            </div>
        </Card>
        <Spin size="large" fix v-if="spinShow"></Spin>
    </div>
</template>

<script>
    import { mapGetters } from "vuex";
    import moment from 'moment';
    import {getDictDataList,getTitleFromDataDict,isRealNum} from "_p/basic/assets/contract/js/utils";
    import {
        findRepaymentPlan,
        findPenaltyInterest,
        findExpense,
    } from "_p/basic/api/contract/contract-detail-inquiry";
    import printJS from "print-js";

    export default {
        // 合同明细详情
        name: "ContractInquiryDetial",
        data() {
            return {
                loading: false,
                pageParams: null,
                contractNo: "",
                applyNo:"",
                single: false,
                openPanel: [1,2,3,4],
                penaltyInterest: [],
                repaymentPlan: [],
                expense: [],
                switch1: false,
                // 放款模式(loanModel) 变更类型  变更主体(PersonRoleType)
                dictArr: ["feeType"],
                dataDict: {},
                spinShow: false,
                repaymentPlanTableHead: [

                    {
                        title: "期数",
                        key: "loan_peroid",
                        sortable: true
                    },
                    {
                        title: "到期日",
                        key: "due_day",
                    },
                    {
                        title: "月供金额",
                        key: "payment_month",
                        slot: "payment_month"
                    },
                    {
                        title: "已付金额",
                        key: "settlement_amount",
                        slot: "settlement_amount"
                    },
                    {
                        title: "未偿本金",
                        key: "totalUnpaidPrinciple",
                        slot: "totalUnpaidPrinciple"
                    },
                    {
                        title: "未偿利息",
                        key: "totalUnpaidInterest",
                        slot: "totalUnpaidInterest"
                    },
                    {
                        title: "未偿金额",
                        key: "unpaidRent",
                        slot: "unpaidRent"
                    }
                ],
                penaltyInterestTableHead: [

                    {
                        title: "期数",
                        key: "termNo",
                    },
                    {
                        title: "逾期时间从",
                        key: "startDate",
                        // slot: "penaltyDate"
                    },
                    {
                        title: "逾期时间至",
                        key: "endDate",
                        // slot: "penaltyDateEnd"
                    },
                    {
                        title: "逾期天数",
                        key: "overdueDays",
                    },
                    {
                        title: "利率%",
                        key: "overdueRate",
                    },
                    {
                        title: "逾期金额",
                        key: "totalPenalty",
                        slot: "totalPenalty"
                    },
                    {
                        title: "豁免金额",
                        key: "exemptedAmt",
                        slot: "exemptedAmt"
                    },
                    {
                        title: "已还金额",
                        key: "receivedAmt",
                        slot: "receivedAmt"
                    },
                    {
                        title: "小计金额",
                        key: "subtotalAmt",
                        slot: "subtotalAmt"
                    }
                ],
                expenseTableHead: [

                    {
                        title: "费用类型",
                        key: "costType",
                        slot: "costType"
                    },
                    {
                        title: "到期日",
                        key: "endDate",
                    },
                    {
                        title: "费用金额",
                        key: "costAmt",
                        slot: "costAmt"
                    },
                    {
                        title: "豁免金额",
                        key: "exemptedAmt",
                        slot: "exemptedAmt"
                    },
                    {
                        title: "已还金额",
                        key: "receivedAmt",
                        slot: "receivedAmt"
                    },
                    {
                        title: "到期金额",
                        key: "expireAmt",
                        slot: "expireAmt"
                    }
                ],
            };
        },
        created() {
            this.getParams();
        },
        mounted() {
            this.init();
        },
        methods: {
            init() {
                this.getDetial();
                this.getDictDataList();
            },
            // 获取初始数据
            getParams() {
                const pageParams = this.afs.getPageParams(this);
                this.pageParams = pageParams;
                this.contractNo = pageParams.contractNo;
                this.applyNo = pageParams.applyNo;
            },
            // 数据字典
            getDictDataList() {
                getDictDataList(this.dictArr).then(res => {
                    this.dataDict = res;
                });
            },
            printTable(){
                printJS({
                    // header:'当期应收',
                    printable:'printTable',
                    type:'html',
                    maxWidth: '100%',
                    style: "table { border: 1px solid #dcdee2 !important}",
                    targetStyles: ['*'],
                    ignoreElements:['noPrint_1'],
                    // honorColor: true,
                })
            },
            change(status) {
                this.$Message.info('开关状态：' + status);
            },
            changeBox() {
                let d = {application_no:this.applyNo,contractNo:this.contractNo}
                findRepaymentPlan(d).then(res => {
                    if (res.code === "0000") {
                        if (this.single === false) {
                            this.viewAll(false,res.data.repayment_plan);
                        } else {
                            // 应收
                            this.viewAll(true,res.data.repayment_plan);
                        }
                    }
                });
            },
            //
            viewAll(sign,val){
                let v = [];
                if(!sign){
                    for(let i=0;i<val.length;i++){
                        if(val[i].status=="OVERDUE"){
                            v = v.concat(val[i]);
                        }
                    }
                }else{
                    for(let i=0;i<val.length;i++){
                        if(val[i].status=="OVERDUE"||val[i].status=="UNPAID"){
                            v = v.concat(val[i]);
                        }
                    }
                }
                this.repaymentPlan = v;
            },
            getDetial() {
                // 应收
                let d = {application_no:this.applyNo,contractNo:this.contractNo}
                findRepaymentPlan(d).then(res => {
                    if (res.code === "0000") {
                        if (this.single === false) {
                            this.viewAll(false,res.data.repayment_plan);
                        } else {
                            // 应收
                            this.viewAll(true,res.data.repayment_plan);
                        }
                    }
                });
                // 应收罚息
                findPenaltyInterest(this.contractNo).then(res => {
                    if (res.code === "0000") {
                        this.penaltyInterest = res.data;
                        this.changeSubtotalAmt();
                    }
                });
                // 应收费用
                findExpense(this.contractNo).then(res => {
                    if (res.code === "0000") {
                        this.expense = res.data;
                    }
                });
            },
            changeSubtotalAmt(row) {
                if (!row) return;
                const {totalPenalty, exemptedAmt, receivedAmt} = row;
                let r = totalPenalty - exemptedAmt - receivedAmt;
                return r.toFixed(2);
            },
            formatTime(date) {
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();

                month = month < 10 ? '0' + month : month;
                day = day < 10 ? '0' + day : day;
                return year + '-' + month + '-' + day;
            },
            changePenaltyDate(row) {
                if (!row) return;
                const {overdueDays} = row;
                var now = new Date();
                now.setDate(now.getDate() - overdueDays)
                return this.formatTime(now);
            },
            changePenaltyDateEnd(row) {
                if (!row) return;
                var now = new Date();
                return this.formatTime(now);
            },
            getTitle(type, val) {
                let data = this.dataDict[type + "Dict"] || [];
                return getTitleFromDataDict(data, val);
            },
            back() {
                //关闭页面
                this.afs.closeTab(this);
            },
            showSpin() {
                this.spinShow = true;
            },
            closeSpin() {
                this.spinShow = false;
            },

            changChildrenData(refDom, name, value) {
                if (this.$refs[refDom]) {
                    this.$refs[refDom][name] = value;
                }
            },
            exportData (type) {
                if (type === 1) {
                    this.$refs.table2.exportCsv({
                        filename: 'The original data'
                    });
                }
            }
        },
        computed: {
            ...mapGetters({ batchDate: "batchDate" }),
            total() {
                const {repaymentPlan, penaltyInterest, expense} = this;
                let sum = 0;
                repaymentPlan.forEach(e => {
                    let n = Number(e.unpaidRent)
                    if(isRealNum(n)) sum += n;
                });
                penaltyInterest.forEach(e => {
                    let n = Number(e.totalPenalty - e.exemptedAmt - e.receivedAmt)
                    if(isRealNum(n)) sum += n;
                });
                expense.forEach(e => {
                    let n = Number(e.expireAmt)
                    if(isRealNum(n)) sum += n;
                });
                return sum.toFixed(2);
            }
        },
    };
</script>
<style lang="less">
    @import "../../../../../styles/common/form.less";

    .total {
        padding: 16px;
    }
    .ContractInquiryDetial {
        .common_title_more {
            padding-left: 10px;
            font-size: 12px;

            span {
                padding-left: 10px;
            }
        }
    }

</style>
